<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- <link href="../css/mui.min.css" rel="stylesheet" /> -->
		<style>
			body {
				text-align: center;
				background-color: rgba(0, 0, 0, 0~1);
			}
			.contentcss {
				text-align: center;
				margin: 0 auto;
				vertical-align: middle;
				background-color: rgba(0, 0, 0, 0~1)
			}
			
			.headcss {
				border: 1px solid red;
				width: 300px;
				height: 300px;
				background-color: wheat;
				margin: 0 auto;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.headcss-2 {
				border: 1px solid red;
				width: 200px;
				height: 300px;
				background-color: wheat;
				margin: 0 auto;
				overflow: hidden;
			}
			
			#style{
				font-size:25px;margin-top:20%;color: #FFFFFF;
			}
			.videocss {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				text-align: center;
			}
		</style>
	</head>

	<body style="background: rgb(2,2,2,0.2);">
		<div class="mui-content contentcss" id="content" style="background: rgb(2,2,2,0);">
			<div class="headcss" id="headdiv">
				<video id="camvideo" class="videocss" autoplay></video>
			</div>
			<div class="headcss-2" id='ssss'>
				<img src="" id='im'>
			</div>
			<button type="button" style="width: 10rem;height: 6rem;margin-top: 3rem;border-radius: 1rem;background-color: #19BE6B;line-height: 6rem;font-size: 2rem;" id="all1">拍照</button>
			<!-- <div id="style" >请将头部对准摄像头</div> -->
		</div>
	</body>

</html>
<!-- <script src="../js/mui.min.js"></script> -->
<!-- <script type="text/javascript" src="../js/app/jquery.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<!-- <script type="text/javascript" src="../js/url.js" ></script> -->
<script type="text/javascript">
	// mui.init();
	// 注意本例需要在HTTPS协议网站中运行，新版本Chrome中getUserMedia接口在http下不再支持。
	// 设置事件监听器
	var video, sinterval,pageid;
	$("#ssss").hide();
	window.addEventListener("DOMContentLoaded", function() {
		var width = document.documentElement.clientWidth;
		var height = document.documentElement.clientHeight;
		document.getElementById("content").style.height = (height - 200) + "px";
		document.getElementById("content").style.width = width + "px";
		document.getElementById("headdiv").style.marginTop = (height - 500) / 2 + "px";
		if(navigator.mediaDevices === undefined) {
		}
		navigator.getUserMedia = navigator.getUserMedia ||
			navigator.webkitGetUserMedia ||
			navigator.mozGetUserMedia;

		if(navigator.getUserMedia) {
			navigator.getUserMedia({
					audio: false,
					video: {
						facingMode: "user",
						width: 300,
						height: 300
					}
				},
				function(stream) {
					video = document.querySelector('video');
					video.srcObject = stream;
					video.onloadedmetadata = function(e) {
						video.play();
						sinterval = setInterval(function() {
							// $("#style").text("识别中，请稍候……");
						}, 5000);
						
						
						
						
						/*setTimeout(function(){
							var preView = plus.webview.getWebviewById(pageid);
							console.log(pageid )
							mui.fire(preView, 'loadfunction', {});
							plus.webview.currentWebview().close();
						},5000)*/
					};
				},
				function(err) {
					// mui.alert("获取摄像头失败。");
				}
			);
		} else {
			// mui.alert("当前环境不适合，无法调用摄像头。");
		}

	}, false);
	
	let click = 1
	
	var allClick = document.getElementById("all1");
	// JS监听
	allClick.addEventListener('click',function(){
		if(click != 1){
			return
		}
		var canvas = document.createElement("canvas");
		canvas.width = 200;
		canvas.height = 300;
		canvas.getContext('2d').drawImage(video, 0, 0, 200, 300);
		var dataURL = canvas.toDataURL("jpg", 1.0); //第二个参数是质量 
		$("#ssss").show();
		$("#im").attr("src",dataURL);
		// var imageDataB64 = dataURL.substring(23); 
		$("#headdiv").hide();
		// console.log(dataURL)
		click = 2
		
		uni.postMessage({
		  data: {
		    action: dataURL
		  }
		});
		
		uni.navigateBack({
		  delta: 1
		});
		
	},false);
	
	// document.getElementById('postMessage').addEventListener('click', function() {
	//   uni.postMessage({
	//     data: {
	//       action: 'message'
	//     }
	//   });
	// });
	
	
	// var count;
	// mui.plusReady(function(){
	// 	var self = plus.webview.currentWebview(); //获取当前窗体对象
	// 	pageid=self.pageid;
	// });
	//人脸识别
	// function opencarema(imgurl) {
	// 	var url = urlmoren + "/phone/facecheck/facecheckfile";
	// 	mui.ajax(url, {
	// 		data: {
	// 			path: imgurl,
	// 			loginname: localStorage.getItem('account')
	// 		},
	// 		dataType: 'json', //服务器返回json格式数据
	// 		type: 'post', //HTTP请求类型
	// 		timeout: 20000,
	// 		success: function(data) {
	// 			var code = data.code;
	// 			if(code == 0) {
	// 				$("#style").text("验证成功！正在跳转。");
	// 				//清除轮询
	// 				window.clearInterval(sinterval);
					
	// 				var preView = plus.webview.getWebviewById(pageid);
	// 				//触发上一个页面刷新图片事件 
	// 				mui.fire(preView, 'loadfunction', {});
	// 				plus.webview.currentWebview().close();
					
	// 			} else {
	// 				++count;
	// 				if(count>=5){
	// 					mui.alert("请本人进行操作。");
	// 					window.clearInterval(sinterval);
	// 					plus.webview.currentWebview().close();	
	// 				}
	// 			}
	// 		}
	// 	});
	// }
</script>